
$(function () {
    $.ajax({
        url: 'http://127.0.0.1:8086/language',
        type: 'get',
        timeout: 5000,
        success: function (request) {
            //获取到年份
            var year=[]
            //获取到计算机语言
            var tongue=[]
            //获取数值
            var recode=[]
            
            var lingo_data = request.data
            var json1 = lingo_data[0]
            var age=json1.Java
        //    console.log(age)
            //年份
            for(var i in age){
                year.push(i)
            }
            // console.log(year)

            //计算机语言,数值
            for(var lingo in json1){
                tongue.push(lingo) 
                 var rec=[]  
              for(var re in json1[lingo]){
                var shuzhi=json1[lingo][re]
                rec.push(shuzhi)
                
              }  
              recode.push(rec)          
          } 
        //    console.log(recode)
            // console.log(tongue) 
        area(year,tongue,recode);
            
        },
        error: function (err) {
            console.log(err)
        }

    })
    function area(year,tongue,recode) {
        var myChart = echarts.init(document.getElementById("ec01_line_tiobe"));
        var option = {
            title: {
            },
            tooltip: {
            },
            legend: {
                data: ['Java', 'C', 'Python', 'NET', 'JavaScript', 'PHP', 'SQL'],
                textStyle: {
                    color: '#87cefa'
                }

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                // feature: {
                //     saveAsImage: {}
                // }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: year
            },
            yAxis: [{
                inverse: true,
                type: 'value',
                min:1,
                max:50,
            }
            ],
            series: [
                {
                    showSymbol: false,
                    name: 'Java',
                    type: 'line',
                    stack: 'Total',
                    data: recode[0]
                },
                {
                    showSymbol: false,
                    name: 'C',
                    type: 'line',
                    stack: 'Total',
                    data: recode[1]
                },
                {
                    showSymbol: false,
                    name: 'Python',
                    type: 'line',
                    stack: 'Total',
                    data:recode[2]
                },
                {
                    showSymbol: false,
                    name: 'NET',
                    type: 'line',
                    stack: 'Total',
                    data: recode[3]
                },
                {
                    showSymbol: false,
                    name: 'JavaScript',
                    type: 'line',
                    stack: 'Total',
                    data: recode[4]
                },
                {
                    showSymbol: false,
                    name: 'PHP',
                    type: 'line',
                    stack: 'Total',
                    data: recode[5]
                },
                {
                    showSymbol: false,
                    name: 'SQL',
                    type: 'line',
                    stack: 'Total',
                    data: recode[6]
                }
            ]
        }
        myChart.setOption(option)
        myChart.on("click",function (params){
            console.log(params)
        })
    }
})